UI UX Course
Dashboard
Module 1: Introduction to the Course
1.1
Introduction
Module 2: Sketching
2.1
Introduction to sketching
2.2
The sketching process
2.3
Sketching user flows
2.4
Sketching user flows 2
2.5
Sketching user flows 3
2.6
Sketching user flows 4
2.7
Sketching tips
Module 3: Inspiration
3.1
How to stay inspired
3.2
How to find inspiration
Module 4: Introduction to Figma
4.1
How to download & browse figma
4.2
Basic Interface of figma
4.3
Move & Scale
4.4
Texts
4.5
Pen and pencil
4.6
Shapes
4.7
Boolean Groups
4.8
Colors
4.9
Layout grid
4.10
Frames and groups
4.11
Masks
4.12
Effects part 1
4.13
Effects part 2
4.14
Components
4.15
Prototype
4.16
Comments & Sharing
4.17
Export
Module 5: Userflows
5.1
The Do's and Dont's
5.2
Speedup Workflow with Components
5.3
Creating own Userflows
5.4
Creating own Userflows 2
5.5
Creating own Userflows 3
Module 6: Sitemaps
6.1
Creating a basic sitemap
6.2
Before you start
6.3
Creating a sitemap 1
6.4
Creating a sitemap 2
6.5
Before getting started with wireframes
Module 7: Wireframes
7.1
What is a wireframe
7.2
How to create wireframes
7.3
Wireframes in figma
7.4
Creating our homepage
7.5
Creating product page
7.6
Creating the Cart page
Module 8: Prototyping
8.1
Prototyping Basics in Figma
8.2
Prototyping Basics in Figma 2
8.3
Prototyping Basics in Figma 3
8.4
Prototyping Basics in Figma 4
8.5
Linking a Quick Userflow
8.6
Working on Small Interactions
Module 9: Feedback
9.1
Why is feedback important and how to work on them
Module 10: Spacing and Grids
10.1
Grid
10.2
Grid Basics
10.3
Responsive Grids and Breakpoints
10.4
Creating own grid in figma
10.5
Grid Guidelines
Module 11: Typography
11.1
Serif
11.2
Sans Serif
11.3
Display and Mono
11.4
Choosing a Typeface
11.5
Creating our own Type System
Module 12: Color
12.1
Color Schemes
12.2
Important Questions to Ask
12.3
Creating Color Palletes
12.4
Creating a Monochromatic Color Pallete
12.5
Applying our Color pallete
12.6
Expanding a Strict Color Pallete
12.7
Creating our own Colour Pallete
Module 13: Forms+UI Elements
13.1
What are forms and UI elements
13.2
Best practices for Forms
13.3
Best practices for Forms 2
13.4
Best practices for Forms 3
13.5
Best practices for Forms 4
13.6
Best practices for Buttons
13.7
Creating components in Figma
13.8
Using Atomic Elements
13.9
Using Instances in Figma
13.10
Editing Instances
13.11
Responsive Components
13.12
Creating a Registration Form
Module 14: Visual Assests
14.1
Visual Assets Introduction
14.2
Photos in Figma
14.3
Photos in Figma 2
14.4
Working with Developers
14.5
Figma Plugins and Icons
14.6
Custom Icons
Module 15: Accessibilty
15.1
Visual Patterns for Accessibilty
15.2
Tools to make Design Accessible
15.3
Visual Patterns for Accessibilty
Module 16: Design Patterns
16.1
What are Design Patterns
16.2
Why are Design Patterns so Valuable
16.3
How to Apply Design Patterns
16.4
Analyzing Design Patterns
16.5
Analyzing, Dissecting and Choosing Design Patterns
Module 17: Mobile Design
17.1
Mobile Design Best Practices
17.2
Best Practice Part 2
Module 18: Visual Style+Exploration
18.1
Design Fidelity
18.2
Style Exploration
18.3
Style Exploration 2
18.4
Style Exploration 3
18.5
Style Exploration 4
Module 19: Motion
19.1
Importance of Motion
19.2
The Purpose of Motion
19.3
Intro to Smart Animate
19.4
The Power of Smart Animate
Module 20: Microinteractions
20.1
What is a Microinteraction
20.2
Why are Microinteractions important
20.3
Creating our own Microinteraction
20.4
Creating our own Microinteraction Part 2
20.5
Figmotion
20.6
Using Figmotion 2
Module 21: Design Systems
21.1
Components Cards
21.2
Vertical Cards
21.3
Recipes Search
21.4
Recipes Order List
Module 22: Final Compositions
22.1
Using our Design System
22.2
Using our Design System 2(Part 1)
22.3
Using our Design System 2(Part 2)
22.4
Using our Design Systems 3
22.5
Final Prototypes
22.6
Final Prototypes 2
22.7
Final Prototypes 3
22.8
Final Prototypes 4
Module 23: Web Portfolio
23.1
Where to host your web portfolio
23.2
How to place and export designs
Module 24: From Figma to Website Building out Website
24.1
Initial setup Figma Handoff
24.2
Build UI - Adding image assets
24.3
Build UI - Styling Image Assets
Module 25: Extra HTML
25.1
Build your First Website
25.2
Developer Fundamentals
25.3
HTML Tags
25.4
HTML Tags 2
25.5
Self Closing Tags
25.6
Anchor Tag
25.7
Index.html
25.8
Relative vs Absolute Path
25.9
Html Forms
25.10
Html Forms 2
25.11
Submitting a Form
25.12
HTML Tags 3
25.13
HTML vs HTML5
25.14
Copy a Website
Module 26: CSS3
26.1
CSS INTRO
26.2
Your First Css Part 2
26.3
Part 3
26.4
Part 2 Selectors
26.5
CSS Properties
26.6
Selectors in CSS
26.7
Text and Font
26.8
Images in CSS
26.9
Box Model
26.10
Px vs em vs rem
26.11
Critical Render Path
26.12
Flexbpx
26.13
CSS3
26.14
Responsive UI
Module 27: Bootstrap templates, and building your startup landing page
27.1
Bootstrap Introduction
27.2
Bootstrap
27.3
Bootstrap Grid
27.4
Exercise: Building our startup landing page part 1 part2
27.5
Exercise: Startup landing page part3
27.6
Exercise: Startup landing page part 4
27.7
Exercise: Startup landing page part 5
27.8
Adding email subscribe form with mailchimp
27.9
Developer Fundamentals
27.10
Working with Templates
Module 28: CSS Grid+Css layout
28.1
Overview
28.2
Grid vs Flexbox vs Bootstrap
28.3
CSS Grid 1
28.4
CSS Grid 2
28.5
CSS Grid 3
28.6
CSS Grid 4
28.7
CSS Grid 5
28.8
Solution Navigation bar
28.9
Solution Navigation bar 2
28.10
Solution Cover
28.11
Project Grid+Footer
28.12
Solution Prettify
Module 29: AI:Design and Ideation
29.1
Finding Design Ideas using ChatGPT
29.2
Creating a User Flow for a Real-World Use Case with ChatGPT
29.3
Creating a Sitemap for a Real-World Use Case with ChatGPT
Module 30: AI:User Research and Analysis
30.1
User Surveys using ChatGPT
30.2
User Interviews using ChatGPT
30.3
User Persona using ChatGPT
30.4
User Journey Mapping using ChatGPT
30.5
Empathy Mapping using ChatGPT
Module 31: AI:UX Writing
31.1
UX Writing using ChatGPT
Module 32: Conclusion
32.1
Conclusion
Your browser does not support the video tag.
Select a lecture to begin